<script setup lang="ts">
interface TabItem {
  [text: string]: any
  value: string | number
  label: string | number
  icon?: string
}
interface Props {
  tabs: TabItem[]
  activeTab: string | number
  className?: string
  hasBg?: boolean
  isGap?: boolean
}

defineOptions({
  name: 'BaseBcGameTab',
})
const props = withDefaults(defineProps<Props>(), {
  hasBg: true,
  isGap: false,
})
const emits = defineEmits(['update:activeTab', 'change'])

const activeTab = computed(() => props.activeTab)
function selected(item: TabItem) {
  emits('update:activeTab', item.value)
  emits('change', item.value, item)
}
</script>

<template>
  <div class="scroll-x tabs-title hide-scroll ml-auto font-semibold " :data-bg="hasBg" :class="[className, { 'p-1': isGap }]">
    <button
      v-for="tab in tabs"
      :key="tab.value"
      class="tabs-btn btn-like"
      :aria-selected="tab.value == activeTab ? true : false"
      @click="selected(tab)"
    >
      <div class="center">
        <BaseIcon v-if="tab.icon" :name="tab.icon" class="icon-text mr-1" />
        <div>{{ tab.label }}</div>
      </div>
    </button>
  </div>
</template>

<style>
:root{
  --bc-base-tab-text-color:var(--color-text-white-2);
  --bc-base-tab-height: 2.5rem;
  --bc-base-tab-padding: 0.25rem;
  --bc-base-tab-radius: 0.5rem;
  --bc-base-tab-icon-color: var(--color-text-white-2);
  --bc-base-tab-bg-color: var(--color-bg-black-3);
  --bc-base-tab-btn-pl: 0.5rem;
  --bc-base-tab-btn-pr: 0.5rem;
  --bc-base-tab-btn-active-bg-color: var(--color-bg-black-5);
  --bc-base-tab-btn-active-text-color: var(--color-text-white-0);
  --bc-base-tab-btn-active-icon-color: rgb(36 238 137);
  --bc-base-tab-btn-icon-font-size: 1rem;

}
</style>

<style scoped lang="scss">
  button{
      background: none;
      text-transform: none;
  }
  .tabs-title{
      display: flex;
      flex: none;
      height: var(--bc-base-tab-height);
      position: relative;
      border-radius: var(--bc-base-tab-radius);
      color: var(--bc-base-tab-text-color);
  }
  .tabs-title:not([data-bg="false"]){
      background-color: var(--bc-base-tab-bg-color)
  }
  .tabs-title .tabs-btn{
    border-radius: var(--bc-base-tab-radius);
  }
  .hide-scroll{
      scrollbar-width: none;
  }
  .scroll-x{
      overflow-y: hidden;
      overflow-x: auto;
      overscroll-behavior: contain;
  }
  .tabs-btn{
      flex: 1;
      align-self: stretch;
      text-wrap: nowrap;
      padding-left: var(--bc-base-tab-btn-pl);
      padding-right: var(--bc-base-tab-btn-pr);
      .icon-text{
        --tg-base-icon-color: var(--bc-base-tab-icon-color);
        font-size: var(--bc-base-tab-btn-icon-font-size);
      }
      &[aria-selected="true"]{
        background-color: var(--bc-base-tab-btn-active-bg-color);
        color: var(--bc-base-tab-btn-active-text-color);
        font-weight: 800;
        & .icon-text{
          color: var(--bc-base-tab-btn-active-icon-color);
        }
      }
  }
  .btn-like{
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      touch-action: manipulation;
      &:active{
          filter: brightness(1.05);
          transform: translateY(1px);
      }
  }
</style>
